<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>作业</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />

</head>
<body style="padding: 50px;">

    <button class="btn btn-info" data-toggle="modal" data-target="#myModal" id="add">新增</button>
    <button class="btn btn-info" id="delete">删除</button>
    <button class="btn btn-info" id="edit">编辑</button>
    <button class="btn btn-info" id="search">查询</button>
    <input type="text" style="width:100px" placeholder="按工号查询" id="searchByNo">  
    <input type="text" style="width:100px" placeholder="按姓名查询" id="searchByName">

    <!-- 声明定义模态框组件 --> 
    <div class="modal" id="myModal" data-backdrop="static"> 
    <!-- 窗口声明 --> 
        <div class="modal-dialog"> 
        <!-- 内容声明 --> 
            <div class="modal-content"> 
                <!-- 1.框的标题 --> 
                <div class="modal-header"> 
                    <button class="close" data-dismiss="modal"> <span>&times;</span> </button> 
                    <h4 class="modal-title" id="tipTitle">新增</h4> 
                </div> 
                <!-- 2.框内信息 --> 
                <div class="modal-body"> 
                    <label>工号：</label>
                    <input type="email" class="form-control" id="newNo" placeholder="工号">
                    <label>姓名：</label>
                    <input type="email" class="form-control" id="newName" placeholder="姓名">
                    <label>性别：</label>
                    <input type="email" class="form-control" id="newSex" placeholder="性别">
                    <label>年龄：</label>
                    <input type="email" class="form-control" id="newAge" placeholder="年龄">
                    <label>出生日期：</label>
                    <input type="email" class="form-control" id="newBir" placeholder="出生日期">          
                </div> 
                <!-- 3.框的按钮 --> 
                <div class="modal-footer"> 
                    <button class="btn btn-info" data-dismiss="modal" id="save">保存</button> 
                    <button class="btn btn-default" data-dismiss="modal">取消 </button> 
                </div> 
            </div> 
        </div>
    </div>

    <table class="table">
        <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>

    
<script src=".\js\jquery-3.3.1.min.js"></script>
<script src=".\js\bootstrap.min.js"></script>
<script type="text/javascript">

    //存储原始列表的数据，增加、删除、编辑都是操作该数组里的对象
    //查询的时候， 从从列表里找到要查询的对象，将对象添加到新数组里，展示
    var users = [
        {"no": "1001", "name": "张三", "sex": "女", "age": 29, "birthday": "1991-1-1"},
        {"no": "1002", "name": "李四", "sex": "男", "age": 28, "birthday": "1992-2-2"},
        {"no": "1003", "name": "王五", "sex": "女", "age": 27, "birthday": "1993-3-3"},
        {"no": "1004", "name": "赵六", "sex": "女", "age": 26, "birthday": "1994-4-4"},
    ];

    //用来更改模态框的保存按钮是哪种类型的操作
    var operateTye = "";
    $("#add").click(function(){
        operateTye = "addSave";
    });
    $("#edit").click(function(){
        operateTye = "editSave";
    });

    //往表格里展示数据
    function refresh(data){
        //每次刷新都要先刷一下原来表格的内容，新内容以数组以准
        $("#tbody > tr").remove();
        for(var i=0; i<data.length; i++){
            var classType = "";
            (i%2 == 0) ? classType = "info":classType = "danger";
            $("#tbody").append(" <tr class= "+ classType + "><td><input type='checkbox' name='row'></td><td>" + data[i].no + "</td><td>" +data[i].name + "</td><td>"+ data[i].sex + "</td><td>"+ data[i].age + "</td><td>" + data[i].birthday + "</td></tr>");
        }
    }
    //DOM加载完成时展示数据
    $(document).ready(refresh(users));
    
    //获取新增或编辑用户的信息
    function getUser(){
        var no = $("#newNo").val();
        var name = $("#newName").val();
        var sex = $("#newSex").val();
        var age = $("#newAge").val();
        var birthday = $("#newBir").val();
        var user = {"no": no, "name": name, "sex": sex, "age": age, "birthday": birthday};
        return user;
    }

    //新增
    $("#save").click(function(){
        //当为新增保存时
        if(operateTye == "addSave"){
            var newUser = getUser();
            users.push(newUser);
            refresh(users);
        }

        //当为修改保存时
        if(operateTye == "editSave"){
            var editUser = getUser();
            //判断一下哪个被选中了
            var allCheckBox = $(":checkbox");
            for(var i=0; i<allCheckBox.length; i++){
                if(allCheckBox[i].checked){
                     users[i] = editUser;
                }
            }
            refresh(users);
        }
    });

    //编辑，用勾选的行号找数组并改数据
    $("#edit").click(function(){
        //改变一下title
        $("#tipTitle").text("编辑");
        var check = $("input:checked");
        if(check.length == 0){
            alert("请勾选要编辑的记录");
        }else if(check.length > 1){
            alert("只能选一个");
        }else{
            //启用模态框
            $(this).attr("data-toggle", "modal");
            $(this).attr("data-target", "#myModal");
            var allCheckBox = $(":checkbox");
            for(var i=0; i<allCheckBox.length; i++){
                    //看看哪个被勾选了
                    if(allCheckBox[i].checked){
                        var userSelected = users[i];
                        //展示被选中的数据在页面上
                        $("#newNo").val(userSelected.no);
                        $("#newName").val(userSelected.name);
                        $("#newSex").val(userSelected.sex);
                        $("#newAge").val(userSelected.age);
                        $("#newBir").val(userSelected.birthday);
                    }
                }
        }
    });

    //删除
    $("#delete").click(function(){
        //必须选中记录才能删除
        var check = $("input:checked");
        if(check.length == 0){
            alert("请勾选要删除的记录");
        }
        //循环被选的记录，删除，从下标大的开始删除
        var allCheckBox = $(":checkbox");
        for(var i=allCheckBox.length-1; i>=0; i--){
            if(allCheckBox[i].checked){
                users.splice(i,1)
            }
        }
        refresh(users);
    });

    //查找，按工号和姓名查找
    $("#search").click(function(){

        var no = $("#searchByNo").val();
        var name = $("#searchByName").val();
        //这个用来放置找到的数据
        var searchUsers = new Array();
        //要是两个查找框都没有数据，直接用原来的数据
        if (no.trim()=="" && name.trim()==""){
            searchUsers = users;
        }else{
            for(var user of users){
                if(no.trim() != "" && name.trim() != ""){
                    if(user.no == no.trim() && user.name == name.trim()){
                        searchUsers.push(user);
                    }
                }else if(no.trim() != "" && name.trim() == ""){
                    if(user.no == no.trim()){
                        searchUsers.push(user);
                    }
                }else if(no.trim() == "" && name.trim() != ""){
                    if(user.name == name.trim()){
                        searchUsers.push(user);
                    }
                }
            }
        } 
        refresh(searchUsers);       
    });

</script>
</body>
</html>